<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        .container {
            margin-right: auto;
            margin-left: auto;
            padding-left: 16px;
            padding-right: 16px;
        }
        .members-list {
            font: 400 17px/1.7em "Open Sans", open-sans, sans-serif;
            -webkit-transform-origin: left top;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }
        .max1010 {
            max-width: 1010px;
        }
        .members-list .member {
            float: left;
            width: 188px;
            height: 188px;
            margin: 0 9px 9px 0;
            cursor: pointer;
        }
        .simple-info {
            display: none;
            position: absolute;
            z-index: 2;
            bottom: 0;
            width: 100%;
            padding: 20px;
        }
        .simple-info .name {
            letter-spacing: 1px;
        }
        .member .simple-info p {
            margin-bottom: 0;
        }
        .simple-info .post {
            font-style: italic;
            -webkit-font-smoothing: antialiased;
        }
        .simple-info .more {
            padding-top: 7px;
            margin-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, .1);
            -webkit-font-smoothing: antialiased;
        }
        .member {
            background: url(image/zhuoqun-oclock.jpg) -1px -2281px;
        }
    </style>
</head>
<body>
<div class="container max1010" style="padding-top: 150px;">
    <div class="members-list clearfix">
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
        <div class="member" style="background-position: 0px -951px;">
            <div class="simple-info transparent"><p class="name">齐俊元</p>
                <p class="post">Founder &amp; CEO</p>
                <p class="more"><a href="/info/member?index=0" target="_blank">More info </a></p></div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(window).load(function () {
        window.onmousemove = function () {
            $('.member').each(function () {
                    var cl = $(this).offset().left + $(this).width() / 2,
                        ct = $(this).offset().top + $(this).height() / 2,
                        hr = ct - event.pageY,
                        wr = event.pageX - cl,
                        angle = Math.atan2(hr, wr) * 180 / Math.PI,
                        len = Math.pow((hr * hr + wr * wr), 0.5);
                    if (angle >= -15 && angle < 15) {
                        $(this).css('backgroundPosition', '0px -4px')
                    } else if (angle >= 15 && angle < 45) {
                        $(this).css('backgroundPosition', '0px -194px')
                    } else if (angle >= 45 && angle < 75) {
                        $(this).css('backgroundPosition', '0px -1904px')
                    } else if (angle >= 75 && angle < 105) {
                        $(this).css('backgroundPosition', '0px -1710px')
                    } else if (angle >= -45 && angle < -15) {
                        $(this).css('backgroundPosition', '0px -384px')
                    } else if (angle >= -75 && angle < -45) {
                        $(this).css('backgroundPosition', '0px -384px')
                    } else if (angle >= -105 && angle < -75) {
                        $(this).css('backgroundPosition', '0px -574px')
                    } else if (angle >= -135 && angle < -105) {
                        $(this).css('backgroundPosition', '0px -760px')
                    } else if (angle >= -165 && angle < -135) {
                        $(this).css('backgroundPosition', '0px -760px')
                    } else if (angle >= 165 && angle < -165) {
                        $(this).css('backgroundPosition', '0px -1148px')
                    } else if (angle >= 135 && angle < 165) {
                        $(this).css('backgroundPosition', '0px -1338px')
                    } else if (angle >= 105 && angle < 135) {
                        $(this).css('backgroundPosition', '0px -1528px')
                    }
                }
            )
        }
    })
</script>
</body>
</html>